<script setup lang="ts">
import audio_and_video from '@/assets/video/audio_and_video.mp4'
import download from '@/assets/video/download.mp4'
import security from '@/assets/video/security.mp4'
import website from '@/assets/video/website.mp4'

import type { BasicSectionProps } from './BasicSection.vue'
const props: BasicSectionProps = {
  title: '应用场景',
  description: '多场景加速能力'
}
const videos: Record<string, string> = {
  audio_and_video,
  website,
  security,
  download
}
const height = ref(364)

const scenes = ref(0)

// scenes.value * height.value * -1 取到当前索引对应的 top值
const sceneScrollTop = computed(() => `${scenes.value * height.value * -1}px`)
</script>

<template>
  <basic-section id="application-scenarios" v-bind="props">
    <a-tabs
      class="application-scenarios__tabs"
      trigger="hover"
      type="capsule"
      v-model:active-key="scenes"
    >
      <a-tab-pane
        v-for="(item, index) in mainParts.applicationScenarios"
        :key="index"
        :title="item.title"
      >
        <template #title>
          <div class="tab-title" v-shadow="{ filter: 32, radius: 28 }">
            <i-as-site v-if="index === 0" />
            <i-as-download v-if="index === 1" />
            <i-as-media v-if="index === 2" />
            <i-as-security v-if="index === 3" />
            <span class="ml-2">{{ item.title }}</span>
          </div>
        </template>
      </a-tab-pane>
    </a-tabs>
    <div class="scene-container">
      <div class="scene-wrapper" :style="{ '--scene-height': `${height}px` }">
        <div
          class="scene-scroll-content"
          :style="{ '--scene-scroll-top': sceneScrollTop }"
        >
          <div
            class="scene-item"
            v-for="(scene, index) in mainParts.applicationScenarios"
            :key="index"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="30"
              class="quote"
              height="24"
              viewBox="0 0 30 24"
              fill="none"
            >
              <path
                opacity="0.2"
                d="M12.619 11.6505H7.61905L11.0714 0H5.71428L0 12.932V24H12.619V11.6505ZM30 11.6505H25L28.4524 0H23.0952L17.3809 12.932V24H30V11.6505Z"
                fill="#41464F"
              />
            </svg>
            <div
              v-for="(item, idx) in scene.content"
              :key="idx"
              :class="{ 'mt-12': idx > 0 }"
            >
              <h2 class="title">{{ item.title }}</h2>
              <p class="desc" v-for="(desc, j) in item.descriptions" :key="j">
                {{ desc }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <a-carousel
        :current="scenes + 1"
        class="h-full"
        :auto-play="false"
        indicator-type="never"
        animation-name="fade"
        show-arrow="never"
      >
        <a-carousel-item
          v-for="(scene, index) in mainParts.applicationScenarios"
          :key="index"
        >
          <video
            autoplay
            @contextmenu.prevent.stop
            :controls="false"
            loop
            muted
            :src="videos[scene.video]"
            class="w-full h-full object-cover"
          />
        </a-carousel-item>
      </a-carousel>
    </div>
  </basic-section>
</template>

<style scoped lang="less">
#application-scenarios {
  background-image: url('@/assets/images/main-parts/bg/application-scenarios.webp');
  .application-scenarios__tabs {
    @apply mb-4;
    :deep(.arco-tabs-content) {
      @apply hidden;
    }
    :deep(.arco-tabs-nav) {
      .arco-tabs-nav-tab-list {
        border-radius: 12px;
        border: 1px solid #fff;
        background: #e7eef9;
        @apply w-full h-14 grid grid-cols-4 items-center;
        .arco-tabs-tab {
          @apply h-12 px-0 flex items-center justify-center rounded-2.5;
          svg {
            transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
            color: #41464f;
          }
          .arco-tabs-tab-title {
            @apply relative z-1 w-full h-full;

            .tab-title {
              @apply flex items-center justify-center w-full h-full;
            }
          }
          &::before {
            @apply rounded-2.5 w-full h-full transform-none opacity-0;
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
            transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
          }
          &.arco-tabs-tab-active {
            color: #fff;
            background-color: #e7eef9;
            svg {
              color: #fff;
            }
            &::before {
              @apply opacity-100;
            }
          }
        }
      }
    }
  }

  .scene-container {
    @apply grid grid-cols-2 gap-x-4 p-4 bg-white rounded-14px;
  }
  .scene-wrapper {
    @apply overflow-hidden px-8;
    height: var(--scene-height);
    .scene-scroll-content {
      @apply relative ease-in-out duration-500;
      transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
      top: var(--scene-scroll-top);
      .scene-item {
        height: var(--scene-height);
        .quote {
          @apply my-10;
        }
        .title,
        .desc {
          @apply m-0;
        }
        .title {
          @apply text-xl mb-4;
          color: #0d0e15;
          font-family: 'PingFang SC medium';
          line-height: normal;
        }
        .desc {
          @apply text-sm font-normal;
          color: #41464f;
          line-height: 150%; /* 21px */
        }
      }
    }
  }
}
</style>
